/**
* 教学基础数据管理 班级管理
*/
<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" class="bar-font">
			<el-breadcrumb-item>教学基础数据管理</el-breadcrumb-item>
			<el-breadcrumb-item>班级管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 搜索筛选 -->
		<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="formInline.className" placeholder="输入班级名称"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input size="small" v-model="formInline.classChargeTeacher" placeholder="输入任课教师"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
			</el-form-item>
		</el-form>

		<!--列表-->
		<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
			element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" width="60">
			</el-table-column>
			<el-table-column sortable prop="classId" label="班级Id" width="100" v-if="false"></el-table-column>
			<el-table-column sortable prop="classCode" label="班级代码" width="100"></el-table-column>
			<el-table-column sortable prop="className" label="班级名称" width="100"></el-table-column>
			<el-table-column sortable prop="classMajor" label="专业" width="100"></el-table-column>
			<el-table-column sortable prop="classGrade" label="年级" width="100"></el-table-column>
			<el-table-column sortable prop="classCampusCode" label="校区代码" width="100"></el-table-column>
			<el-table-column sortable prop="classChargeTeacher" label="任课教师" width="100"></el-table-column>
			<el-table-column sortable prop="classAffiliatedCampus" label="校区" width="100"></el-table-column>
			<el-table-column sortable prop="classGradeCode" label="年级代码" width="100"></el-table-column>
			<el-table-column sortable prop="classMajorCode" label="专业代码" width="100"></el-table-column>

			<el-table-column align="center" label="操作" min-width="200">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination> -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
		<!-- 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="班级代码" prop="classCode">
					<el-input size="small" v-model="editForm.classCode" auto-complete="off" placeholder="请输入班级代码">
					</el-input>
				</el-form-item>
				<el-form-item label="班级名称" prop="className">
					<el-input size="small" v-model="editForm.className" auto-complete="off" placeholder="请输入班级名称">
					</el-input>
				</el-form-item>
				<el-form-item label="专业" prop="classMajor">
					<el-input size="small" v-model="editForm.classMajor" auto-complete="off" placeholder="请输入专业">
					</el-input>
				</el-form-item>
				<el-form-item label="年级" prop="classGrade">
					<el-input size="small" v-model="editForm.classGrade" auto-complete="off" placeholder="请输入年级">
					</el-input>
				</el-form-item>
				<el-form-item label="校区代码" prop="classCampusCode">
					<el-input size="small" v-model="editForm.classCampusCode" auto-complete="off" placeholder="请输入校区代码">
					</el-input>
				</el-form-item>
				<el-form-item label="任课教师" prop="classChargeTeacher">
					<el-input size="small" v-model="editForm.classChargeTeacher" auto-complete="off" placeholder="请输入任课教师">
					</el-input>
				</el-form-item>
				<el-form-item label="校区" prop="classAffiliatedCampus">
					<el-input size="small" v-model="editForm.classAffiliatedCampus" auto-complete="off" placeholder="请输入校区">
					</el-input>
				</el-form-item>
				<el-form-item label="年级代码" prop="classGradeCode">
					<el-input size="small" v-model="editForm.classGradeCode" auto-complete="off" placeholder="请输入年级代码">
					</el-input>
				</el-form-item>
				<el-form-item label="专业代码" prop="classMajorCode">
					<el-input size="small" v-model="editForm.classMajorCode" auto-complete="off" placeholder="请输入专业代码">
					</el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">
					保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

	import {
		classsearch,
		classInsert,
		classEdit,
		classDelete
	} from '../../api/getData'
	export default {
		data() {
			return {
				nshow: true, //switch开启
				fshow: false, //switch关闭
				loading: false, //是显示加载
				editFormVisible: false, //控制编辑页面显示与隐藏
				title: '添加',
				editForm: {
					classCode:'',
					className:'',
					classMajor:'',
					classGrade:'',
					classCampusCode:'',
					classChargeTeacher:'',
					classAffiliatedCampus:'',
					classGradeCode:'',
					classMajorCode:'',
					token: localStorage.getItem('logintoken')
				},
				// rules表单验证
				rules: {
					classCode: [{
						required: true,
						message: '请输入班级代码',
						trigger: 'blur'
					}]
				},
				formInline: {
					className:'',
					classChargeTeacher:''
				},
				// 删除部门
				seletedata: {
					ids: '',
					token: localStorage.getItem('logintoken')
				},
				userparm: [], //搜索权限
				listData: [], //用户数据
				// 分页参数
				pageSizes: [10, 20, 40, 400],
				total: 100,
				currentPage: 1,
				pageSize: 10
			}
		},


		/**
		 * 创建完毕
		 */
		created() {
			this.getdata(this.formInline)
		},
		/**
		 * 里面的方法只有被调用才会执行
		 */
		methods: {
			getdata(parameter) {
				this.formInline.page = this.currentPage;
				this.formInline.limit = this.pageSize
				this.loading = true
				
		/***
		 * 调用接口，注释上面模拟数据 取消下面注释
		 */
				classsearch(parameter)
					.then(res => {
						this.formInline.page = 1
						this.formInline.limit = 10
						this.loading = false
						console.log(res)
						if (res != -1) {
							this.listData = res.datas
							// 分页赋值
							this.total = res.total
						}
					})
					.catch(err => {
						this.loading = false
						this.$message.error('菜单加载失败，请稍后再试！')
					})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.search();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.search();
			},
			// 分页插件事件
			callFather(parm) {
				this.formInline.page = parm.currentPage
				this.formInline.limit = parm.pageSize
				this.getdata(this.formInline)
			},
			// 搜索事件
			search() {
				this.getdata(this.formInline)
			},
			//显示编辑界面
			handleEdit: function(index, row) {
				this.editFormVisible = true
				if (row != undefined && row != 'undefined') {
					this.title = '修改'
					this.editForm.classId = row.classId
					this.editForm.classCode = row.classCode
					this.editForm.className = row.className
					this.editForm.classMajor = row.classMajor
					this.editForm.classGrade = row.classGrade
					this.editForm.classCampusCode = row.classCampusCode
					this.editForm.classChargeTeacher = row.classChargeTeacher
					this.editForm.classAffiliatedCampus = row.classAffiliatedCampus
					this.editForm.classGradeCode = row.classGradeCode
					this.editForm.classMajorCode = row.classMajorCode

				} else {
					this.title = '添加'
					this.editForm.classCode = ''
					this.editForm.className = ''
					this.editForm.classMajor = ''
					this.editForm.classGrade = ''
					this.editForm.classCampusCode = ''
					this.editForm.classChargeTeacher = ''
					this.editForm.classAffiliatedCampus = ''
					this.editForm.classGradeCode = ''
					this.editForm.classMajorCode = ''
				}
			},
			// 编辑、增加页面保存方法
			submitForm(editData) {
				this.$refs[editData].validate(valid => {
					if (valid) {
						if (this.title == '添加') {
							console.log("进入添加模块")
							classInsert(this.editForm).then(res => {
								console.log(res)
								this.editFormVisible = false
								this.loading = false
			
								if (res != -1) {
									this.getdata(this.formInline)
									this.$message({
										type: 'success',
										message: '班级添加成功!'
									})
								} else {
									this.$message({
										type: 'error',
										message: '班级添加失败!'
									})
								}
							})
						} else if (this.title == '修改') {
							console.log(this.editForm)
							console.log("进入修改模块")
							classEdit(this.editForm).then(res => {
								console.log(res)
								this.editFormVisible = false
								this.loading = false
								if (res != -1) {
									this.getdata(this.formInline)
									this.$message({
										type: 'success',
										message: '班级修改成功!'
									})
								} else {
									this.$message({
										type: 'error',
										message: '班级修改失败!'
									})
								}
							})
						}
					} else {
						return false
					}
				})
			},
			// 删除班级
			deleteUser(index, row) {
				this.$confirm('确定要删除吗?', '信息', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						classDelete({"classCode":row.classCode})
							.then(res => {
								console.log(res)
								if (res != -1) {
									this.$message({
										type: 'success',
										message: '班级删除成功!'
									})
									this.getdata(this.formInline)
								} else {
									this.$message({
										type: 'error',
										message: '班级删除失败!'
									})
								}
							})
							.catch(err => {
								this.loading = false
								this.$message.error('班级删除失败，请稍后再试！')
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// 关闭编辑、增加弹出框
			closeDialog() {
				this.editFormVisible = false
			}



		},
	}
</script>

<style scoped>
	.user-search {
		margin-top: 20px;
	}

	.userRole {
		width: 100%;
	}
	
	.bar-font {
		font-weight: 900;
	}
</style>
